<template>
  <div class="pub">
    <!-- 用户信息区域 -->
    <div class="pub-flex pub-user-msg">
      <van-image round width="40px" height="40px" :src="url" class="pub-avtar" />
      <div>
        <span>用户昵称</span>
        <span class="pub-color-6">发布了视频</span>
        <div class="pub-color-6">3月21日</div>
      </div>
      <van-button color="#7fbe87" plain icon="plus" class="focus-btn" @click="clickfocus">关注</van-button>
    </div>
    <div>[种草]卡就是卡卡手机卡手机卡监控数据库</div>
    <!-- 视频模板 -->
    <div v-if="genre % 2 == 0" class="pub-audio">
      <img :src="url" alt="" class="pub-audio-img" />
      <div class="pub-flex pub-ai-center pub-mt-6">
        <div class="pub-flex pub-ai-center">
          <van-image round width="25px" height="25px" :src="url" />
          <van-image round width="25px" height="25px" :src="url" style="left: -10px" />
          <van-image round width="25px" height="25px" :src="url" style="left: -20px" />
          <van-icon name="star-o" />999人收藏
        </div>
        <div class="pub-ml-auto">
          <span style="padding-right: 20px"> <van-icon name="chat-o" /> 99</span>
          <span> <van-icon name="share-o" /> 分享 </span>
        </div>
      </div>
    </div>
    <!-- 图片文案模板 -->
    <div v-else class="pub-picture">
      <Ellipsis text="" />
      <div>
        <van-grid :border="false" :column-num="3" :square="true">
          <van-grid-item v-for="(item, index) in genre % 3 == 0 ? 10 : 5" :key="index">
            <van-image :src="url" />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="pub-flex pub-jc-sb">
        <div><van-icon name="like-o" /> 99W</div>
        <div><van-icon name="chat-o" /> 99</div>
        <div><van-icon name="share-o" /> 分享</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from '@vue/runtime-core'
import { Toast } from 'vant';
// 自定义组件引入
import Ellipsis from './ellipsis.vue'
/**
 * @param genre 模板类型
 * @param isFocus 是否需要关注按钮
 * */
defineProps({
  genre: {
    type: Number,
    required: false
  },
  isFocus: {
    type: Boolean,
    default: false,
    required: false
  }
})
const url = ref('https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png');

// 关注  取关
const clickfocus=()=>{
  Toast('点击关注')
}
</script>

<style scoped lang='scss'>
// 公用类
.pub-flex {
  display: flex;
  flex-wrap: wrap;
}
.pub-ml-auto {
  margin-left: auto;
}
.pub-ai-center {
  align-items: center;
}
.pub-color-6 {
  color: #666666;
}
.pub-jc-sb {
  justify-content: space-between;
}
.pub-mt-6 {
  margin-top: 6px;
}
// 私有类
.pub {
  margin-bottom: 15px;
  & > div:nth-of-type(2) {
    margin: 8px 0px;
  }
}
.pub-user-msg {
  align-items: center;
  .pub-avtar {
    margin-right: 5px;
  }
  .focus-btn {
    border-radius: 15px;
    height: 25px;
    overflow: hidden;
    @extend .pub-ml-auto;
  }
}

.pub-audio {
  .pub-audio-img {
    width: 100%;
    height: 200px;
    border-radius: 10px;
  }
}
.pub-picture{
  ::v-deep .van-grid-item__content{
    padding-bottom: 0px;
  }
}
</style>